<template>
  <div class="title">顺义区防汛物资</div>
  <SeamlessScroll class="es-center-bottom">
    <div v-for="(item, index) in actions" class="es-bottom-item">
      <!-- <ElIcon size="32" :color="item.color">
        <component :is="iconObj[item.icon]" />
      </ElIcon> -->
      <div :style="{ color: item.color }">{{ item.name }}</div>
      <Vue3Odometer
        :style="{ color: item.color }"
        class="es-item-text"
        :value="item.value"
        :duration="8000"
      />
    </div>
  </SeamlessScroll>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElIcon } from 'element-plus'
import Vue3Odometer from 'vue3-odometer'
import 'odometer/themes/odometer-theme-default.css'
import {
  KnifeFork,
  IceTea,
  Coffee,
  IceCream,
  Dessert,
  GobletFull,
} from '@element-plus/icons-vue'
import SeamlessScroll from '@/components/SeamlessScroll.vue'
const iconObj = { KnifeFork, IceTea, Coffee, IceCream, Dessert, GobletFull }
const actions = ref([
  {
    color: 'rgb(24, 144, 255)',
    icon: 'KnifeFork',
    name: '抢险舟(艘)',
    value: 62,
  },
  {
    color: 'rgb(255, 192, 105)',
    icon: 'IceTea',
    name: '救生衣(件)',
    value: 6860,
  },
  {
    color: 'rgb(92, 219, 211)',
    icon: 'Coffee',
    name: '草袋(万)',
    value: 226.29,
  },
  {
    color: 'rgb(179, 127, 235)',
    icon: 'IceCream',
    name: '麻袋(万)',
    value: 14.625,
  },
  {
    color: 'rgb(255, 133, 192)',
    icon: 'Dessert',
    name: '编织袋(万)',
    value: 56.3942,
  },
  {
    color: 'rgb(255, 214, 102)',
    icon: 'GobletFull',
    name: '无纺布(平)',
    value: 19350,
  },
  {
    color: 'rgb(24, 144, 255)',
    icon: 'KnifeFork',
    name: '铅丝(吨)',
    value: 45.167,
  },
  {
    color: 'rgb(255, 192, 105)',
    icon: 'IceTea',
    name: '桩木(立方)',
    value: 359,
  },
  {
    color: 'rgb(92, 219, 211)',
    icon: 'Coffee',
    name: '块石(立方)',
    value: 86548,
  },
  {
    color: 'rgb(179, 127, 235)',
    icon: 'IceCream',
    name: '砂石料(立方)',
    value: 71897.2,
  },
  {
    color: 'rgb(92, 219, 211)',
    icon: 'Dessert',
    name: '作业灯(个)',
    value: 796,
  },
  {
    color: 'rgb(255, 133, 192)',
    icon: 'Dessert',
    name: '运输车(辆)',
    value: 519,
  },
  {
    color: 'rgb(179, 127, 235)',
    icon: 'Dessert',
    name: '铲吊车(辆)',
    value: 264,
  },
  {
    color: 'rgb(255, 133, 192)',
    icon: 'Dessert',
    name: '发电车(台)',
    value: 369,
  },
  {
    color: 'rgb(255, 214, 102)',
    icon: 'Dessert',
    name: '水泵(台)',
    value: 2055,
  },
])
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
  font-size: 16px;
}
.es-center-bottom {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 150px;
  .es-bottom-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--es-block-bg);
    font-size: 22px;
    font-weight: 600;
    .es-item-text {
      margin-top: 16px;
    }
  }
}
</style>
